<template>
  <div>
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="prev" />

    <van-tabs
      :sticky="true"
      :duration="0.5"
      :swipe-threshold="1"
      v-model="active"
      @click="handleTabClick()"
      :offset-top="this.heightall"
      title-active-color="#6face9"
      color="#6face9"
      line-width="20px">
      <van-tab
        v-for="(item, index) in tabs"
        :name="index"
        :title="tabs[index]"
        class="van-tab-active">
        <!-- 未查询订单信息则显示 暂无内容 -->
        <van-empty
          v-if="orderList.length == 0"
          description="暂无内容"
          :image="require('@/assets/Empty1.png')" />
        <!-- <van-image :src="require('../../assets/Empty1.png')"/> -->
      </van-tab>
    </van-tabs>

    <!-- 查看全部 -->
    <van-tab-pane
      v-if="active == '0'"
      name="0"
      v-for="item in personal"
      :key="item.orderid">
      <!-- <div v-for=" index in 3"> -->
      <div class="o-head">
        <van-row>
          <van-col span="2">
            <van-image
              width="30"
              height="30"
              class="store-icon"
              :src="item.storeimage" />
          </van-col>
          <van-col
            span="18"
            style="font-size: 12px; text-align: left; color: #7c696c"
            >{{ item.storeName }}</van-col
          >
          <van-col span="4" style="color: #6face9; font-size: 14px">{{
            item.orderStatusName
          }}</van-col>
        </van-row>
      </div>

      <van-card
        :price="item.price"
        :title="item.productName"
        :thumb="item.imageurl"
        style="text-align: left; width: 80%; background-color: #f8f8f8">
        <template #tags>
          <van-tag
            plain
            type="danger"
            style="margin-right: 15px; margin-top: 15px"
            >x{{ item.productCount }}</van-tag
          >
        </template>
      </van-card>
      <div style="text-align: right; margin-right: 12px">
        <span
          ><p style="font-size: 9px; margin-right: 12px">
            <span>实付款:</span
            ><sapn style="color: red; font-size: 15px"
              >￥{{ item.productPrice }}</sapn
            >
          </p></span
        >
        <van-button
          v-if="item.orderStatusCode == 11"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="goCancel(item.tcount)"
          >取消订单</van-button
        >
        <van-button
          v-if="item.orderStatusCode == 11"
          round
          style="background: #019fe8; color: white"
          @click="goPay(item.tcount)"
          size="small"
          >去支付</van-button
        >
        <van-button
          v-if="item.orderStatusCode == 9"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="godelete(item.orderid)"
          >删除订单</van-button
        >
        <van-button
          v-if="item.orderStatusCode == 9"
          round
          style="background: #019fe8; color: white"
          @click="productTable(item.commodityId)"
          size="small"
          >再次购买</van-button
        >
         <van-button
          v-if="item.orderStatusCode == 12"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="delivery"
          >催发货</van-button
        >
      </div>
    </van-tab-pane>

    <!-- 待付款 -->
    <van-tab-pane
      v-if="active == 1"
      name="1"
      v-for="item in personal"
      :key="item.orderid">
      <!-- <div v-for=" index in 3"> -->
      <div class="o-head">
        <van-row>
          <van-col span="2">
            <van-image
              width="30"
              height="30"
              class="store-icon"
              :src="item.storeimage" />
          </van-col>
          <van-col
            span="19"
            style="font-size: 12px; text-align: left; color: #7c696c"
            >{{ item.storeName }}</van-col
          >
          <van-col span="3" style="color: #6face9; font-size: 14px">{{
            item.orderStatusName
          }}</van-col>
        </van-row>
      </div>

      <van-card
        :price="item.price"
        :title="item.productName"
        :thumb="item.imageurl"
        style="text-align: left; width: 80%; background-color: #f8f8f8">
        <template #tags>
          <van-tag
            plain
            type="danger"
            style="margin-right: 15px; margin-top: 15px"
            >x{{ item.productCount }}</van-tag
          >
        </template>
      </van-card>
      <div style="text-align: right; margin-right: 12px">
        <span
          ><p style="font-size: 9px; margin-right: 12px">
            <span>实付款:</span
            ><sapn style="color: red; font-size: 15px"
              >￥{{ item.productPrice }}</sapn
            >
          </p></span
        >
        <van-button
          v-if="item.orderStatusCode == 11"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="goCancel(item.tcount)"
          >取消订单</van-button
        >
        <van-button
          v-if="item.orderStatusCode == 11"
          round
          style="background: #019fe8; color: white"
          @click="goPay(item.tcount)"
          size="small"
          >去支付</van-button
        >
      </div>
    </van-tab-pane>
    <!-- 代发货 -->
    <van-tab-pane
      v-if="active == '2'"
      name="2"
      v-for="item in personal"
      :key="item.orderid">
      <!-- <div v-for=" index in 3"> -->
      <div class="o-head">
        <van-row>
          <van-col span="2">
            <van-image
              width="30"
              height="30"
              class="store-icon"
              :src="item.storeimage" />
          </van-col>
          <van-col
            span="19"
            style="font-size: 12px; text-align: left; color: #7c696c"
            >{{ item.storeName }}</van-col
          >
          <van-col span="3" style="color: #6face9; font-size: 14px">{{
            item.orderStatusName
          }}</van-col>
        </van-row>
      </div>

      <van-card
        :price="item.price"
        :title="item.productName"
        :thumb="item.imageurl"
        style="text-align: left; width: 80%; background-color: #f8f8f8">
        <template #tags>
          <van-tag
            plain
            type="danger"
            style="margin-right: 15px; margin-top: 15px"
            >x{{ item.productCount }}</van-tag
          >
        </template>
      </van-card>
      <div style="text-align: right; margin-right: 12px">
        <span
          ><p style="font-size: 9px; margin-right: 12px">
            <span>实付款:</span
            ><sapn style="color: red; font-size: 15px"
              >￥{{ item.productPrice }}</sapn
            >
          </p></span
        >
        <van-button
          v-if="item.orderStatusCode == 12"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="delivery"
          >催发货</van-button
        >
      </div>
    </van-tab-pane>

    <!-- 取消订单 -->
    <van-tab-pane
      v-if="active == '5'"
      name="5"
      v-for="item in personal"
      :key="item.orderid">
      <!-- <div v-for=" index in 3"> -->
      <div class="o-head">
        <van-row>
          <van-col span="2">
            <van-image
              width="30"
              height="30"
              class="store-icon"
              :src="item.storeimage" />
          </van-col>
          <van-col
            span="18"
            style="font-size: 12px; text-align: left; color: #7c696c"
            >{{ item.storeName }}</van-col
          >
          <van-col span="4" style="color: #6face9; font-size: 14px">{{
            item.orderStatusName
          }}</van-col>
        </van-row>
      </div>

      <van-card
        :price="item.price"
        :title="item.productName"
        :thumb="item.imageurl"
        style="text-align: left; width: 80%; background-color: #f8f8f8">
        <template #tags>
          <van-tag
            plain
            type="danger"
            style="margin-right: 15px; margin-top: 15px"
            >x{{ item.productCount }}</van-tag
          >
        </template>
      </van-card>
      <div style="text-align: right; margin-right: 12px">
        <span
          ><p style="font-size: 9px; margin-right: 12px">
            <span>实付款:</span
            ><sapn style="color: red; font-size: 15px"
              >￥{{ item.productPrice }}</sapn
            >
          </p></span
        >
        <van-button
          v-if="item.orderStatusCode == 9"
          round
          type="default"
          style="background: #f6f6f6"
          size="small"
          @click="godelete(item.orderid)"
          >删除订单</van-button
        >
        <van-button
          v-if="item.orderStatusCode == 9"
          round
          style="background: #019fe8; color: white"
          @click="productTable(item.commodityId)"
          size="small"
          >再次购买</van-button
        >
      </div>
    </van-tab-pane>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    //存放使用的所有属性数据
    return {
      //方便编写表单校验
      heightall: 0,
      active: this.$route.query.Aid + "",
      userId: Number(this.$route.query.id),
      orderCode: this.$route.query.orderCode,
      tabs: {
        0: "全部",
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
        5: "取消",
      },
      orderList: [1], //查询订单的数量
      totalAmount: 9.99, //支付总金额
      personal: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handleTabClick() {
      if (this.active == "0") {
        this.orderCode = "";
        this.loadData();
      } else if (this.active == "1") {
        this.orderCode = "11";
        this.loadData();
      } else if (this.active == "2") {
        this.orderCode = "12";
        this.loadData();
      } else if (this.active == "5") {
        this.orderCode = "9";
        this.loadData();
      }
    },
    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      _this.$http
        .get(
          "/tbOrder/queryByIdCode?userId=" +
            this.userId +
            "&orderStatusCode=" +
            this.orderCode
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.personal = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //去支付
    goPay(tcount) {
      this.$router.push({ name: "pay", query: { data: tcount } });
    },
    //取消订单
    goCancel(tcount) {
      //没有绑定该门店
      Dialog.confirm({
        title: "提示",
        message: "是否取消订单",
      })
        .then(() => {
          //不是直接使用axios 而是使用$http
          //baseURL="http://localhost:8080"
          var _this = this;
          this.$http
            .post("/tbOrder/Cancelupdate?tcount=" + tcount)
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                Toast("订单已取消");
                _this.loadData();
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Toast("已取消");
        });
    },
    //删除订单
    godelete(id) {
      //没有绑定该门店
      Dialog.confirm({
        title: "提示",
        message: "是否删除订单",
      })
        .then(() => {
          var _this = this;
          this.$http
            .delete("/tbOrder/deleteById?id=" + id)
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                Toast("订单已删除");

                _this.loadData();
              } else {
                _this.$message("操作失败");
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Toast("已取消");
        });
    },
    //获取商品 再次购买
    productTable(id) {
      var _this = this;
      this.$http
        .get("/tbCommodity/queryAllTbCommodityId?commodityId=" + id)
        .then(function (response) {
          if (response.data.code == 200) {
            _this.goCommodity(response.data.data);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //跳转商品页面
    goCommodity(product) {
      //  路径/store对应router目录下index.js中定义的path属性值
      this.$router.push({
        path: "/singleCommodity",
        query: { data: JSON.stringify(product) },
      });
    },
    //催发货
    delivery() {
      Toast("已成功催发货")
    },
    //  方法事件处理
    prev() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.m-header {
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  color: #000000;
}

.m-header-icon {
  position: absolute;
  top: 16px;
  left: 6px;
  font-size: 18px;
}

/* vant-tab 选择加粗 */
::v-deep .van-tab--active {
  font-weight: 900;
}

.o-head {
  margin-top: 20px;
  height: 35px;
  line-height: 35px;
}
</style>
